<template>
  <div class="list">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="商品名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="副标题">
        <el-input v-model="form.subName"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model.number="form.price" type="number"></el-input>
      </el-form-item>
      <el-form-item label="商品分类">
        <el-select v-model="form.type" placeholder="请选择商品分类">
          <el-option label="服装" value="fuzhuang"></el-option>
          <el-option label="手机数码" value="shuma"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-upload
          action="#"
          :limit="1"
          list-type="picture-card"
          :on-change="handleUpload"
          :auto-upload="false">
            <template #default>
              <i class="el-icon-plus"></i>
            </template>
            <template #file="{file}">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img width="100%" :src="form.img" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品介绍">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { saveGoods } from '@/api/page'
  export default {
    name: 'goods-add',
    components: {
        
    },
    data(){
      return {
         form: {
          name: '',
          subName: '',
          price: '',
          type: '',
          img: '',
          desc: ''
        },

        dialogVisible: false,
        disabled: false

      }
    },
    methods: {
      onSubmit() {
        console.log(this.form);
        saveGoods(this.form).then((res)=>{
          if(res.code == 200){
            this.$message.success(res.msg);
          }else{
            this.$message.error(res.msg);
          }
        }).catch((err)=>{

        });
      },
      handleUpload(file){
        this.form.img = file.url;
      },
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.form.img = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    }
  }
</script>

<style lang="less" scoped>
    .list{
        padding: 16px;
        background: #fff;
    }
</style>
